<template>
    <div class="bigvip">
        <dl class="vip">
            <dd class="top">
                <h3>{{ $t('language.vip.title') }}</h3>
                <el-button @click="upgrade">{{ $t('language.vip.btnname') }}</el-button>
                <el-icon color="rgb(151,151,151)" @click="warnDialog = true" size="30">
                    <QuestionFilled />
                </el-icon>
            </dd>
            <dd class="bottom">
                <div class="imglist">
                    <template v-for="(item, index) in vip.vips" :key="index">
                        <div class="imgitem" @click="iconindex = index" :class="iconindex == index ? 'scale' : ''">
                            <NuxtImg src="/img/vip_01.png" alt="" />
                            <span>V{{ index }}</span>
                        </div>
                    </template>
                </div>
                <div class="vipimg">
                    <div>
                        <NuxtImg :src="vipimg[iconindex]" alt="" />
                        <span>VIP{{ iconindex }}</span>
                    </div>
                    <ul>
                        <li>
                            <NuxtImg src="/img/vip_02.png" alt="" />
                            <div>
                                <span>{{ $t("language.vip.icon1") }}</span>
                                <strong>R${{
                    $dot(vip['vips'][iconindex]["upgradeBonus"])
                }}</strong>
                            </div>
                        </li>
                        <li>
                            <NuxtImg src="/img/vip_03.png" alt="" />
                            <div>
                                <span>{{ $t("language.vip.icon2") }}</span><strong>{{
                    vip['vips'][iconindex]["todayTimesLimit"]
                }}</strong>
                            </div>
                        </li>
                        <li>
                            <NuxtImg src="/img/vip_04.png" alt="" />
                            <div>
                                <span>{{ $t("language.vip.icon3") }}</span><strong>{{
                    vip['vips'][iconindex]["withdrawalRate"]
                }}%</strong>
                            </div>
                        </li>
                        <li>
                            <NuxtImg src="/img/vip_05.png" alt="" />
                            <div>
                                <span>{{ $t("language.vip.icon4") }}</span><strong>R${{
                    $dot(vip['vips'][iconindex]["todayAmountLimit"])
                }}</strong>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="module1">
                    <h2>{{ $t("language.vip.module2") }}</h2>
                    <p>1.{{ $t("language.vip.text1") }}R${{ $dot(vip['vips'][iconindex]["highest"])
                        }}</p>
                    <!-- <p>2.{{ $t("language.vip.text2") }}</p> -->
                </div>
            </dd>
        </dl>
        <div class="warnDialog">
            <el-dialog v-model="warnDialog" :show-close="false" width="450px">
                <div class="closerank" @click="warnDialog = false">
                    <strong></strong>
                    <h3>{{ $t("language.vip.vipDialogtitle") }}</h3>
                    <span>
                        <el-icon color="#b5b6c8" size="16">
                            <Close />
                        </el-icon>
                    </span>
                </div>
                <p>
                    {{ $t("language.vip.text4") }}
                </p>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { QuestionFilled, Close } from '@element-plus/icons-vue'

let store = useStore()
// 去升级
let upgrade=():void=>{
    store.$patch({rechangeType:2})
    store.$patch({rechange:true})
}
let vipimg = shallowReactive<string[]>(['/img/vipimg1.png', '/img/vipimg2.png', '/img/vipimg3.png', '/img/vipimg4.png', '/img/vipimg5.png', '/img/vipimg6.png', '/img/vipimg7.png'])
// 获取用户信息

let userinfo = computed(() => store.$state.userinfo)
//获取vip信息
let vip: any = reactive({
    vips: [
        {
        grade: 0,
        highest: 5000,
        lowest: 0,
        name: "VIP0",
        todayAmountLimit: 0,
        todayTimesLimit: 0,
        upgradeBonus: 0,
        withdrawalRate: 0,
    }
],
    vipinfo: {
        currentRank: 0,
        currentVipRecharge: 0,
        id: 1688771,
        nextRank: 1,
        upgradeNeedRecharge: 5000,
    }
});
let percentage = (data1: any, data2: any) => {
    return Number(data1) / Number(data2) * 100 > 100 ? 100 : Number(data1) / Number(data2) * 100
}
let iconindex = ref(0);
let initData = async () => {

    await nextTick()
    await useHttpPOST(`/Basic/v1.0/User/VipWithdrawl`, { id: userinfo.value.gameID }).then((res: any) => {
        vip.vips = res.data.value.data.vips;
    });
    await useHttpPOST(`/UserCenter/v1.0/User/Vip`, { id: userinfo.value.gameID }).then((res: any) => {
        for (let key in res.data.value.data) {
            vip.vipinfo[key] = res.data.value.data[key]
        }
        iconindex.value = vip.vipinfo.currentRank
    });
}
//打开警告弹窗
let warnDialog = ref(false)

initData()
// onActivated(() => {
//     initData()
// });
</script>
<style lang="scss">
.warnDialog {
    .closerank {
        width: 100%;
        @include flex(row, space-between, center);
        border-bottom: 1px solid #4a4c53;
        padding-bottom: 15px;

        strong {
            width: 30px;
            display: block;
        }

        h3 {
            font-size: 18px;
            color: #fff;
            text-align: center;
            flex: 1;
        }

        span {
            display: block;
            width: 28px;
            height: 28px;
            @include flex(row, center, center);
            border: 2px solid #b5b6c8;
            border-radius: 16px;
            cursor: pointer;
        }
    }

    .el-dialog__header {
        padding: 0;
    }

    p {
        padding: 30px 0;
        font-size: 14px;
        word-break: break-all;
        color: #b5bac8;
        line-height: 34px;
    }

    .el-dialog__title {
        color: #fff !important;
        text-align: left !important;
    }

    .el-dialog {
        padding: 20px !important;
        background-color: rgb(50, 53, 62) !important;
        --el-dialog-bg-color: rgb(50, 53, 62) !important;
        border-radius: 15px;
    }
}
</style>
<style scoped lang="scss">
.bigvip {
    .vip {
        width: 100%;
        height: 100%;

        .top {
            padding: 0 20px;
            position: relative;
            min-height: 250px;
            position: relative;
            background-color: #3f4146;
            border-radius: 20px 20px 0 0;

            .el-icon {
                cursor: pointer;
            }

            h3 {
                color: #fff;
                font-size: 30px;
                font-weight: normal;
                margin-bottom: 30px;
            }

            @include flex(column, center, center);

            .el-button {
                width: 310px;
                height: 48px;
                border-radius: 10px;
                color: #fff;
                font-size: 24px;
                background: #0a906c
            }

            .el-icon {
                position: absolute;
                right: 10px;
                top: 10px
            }
        }

        .bottom {
            padding: 34px 30px 20px;

            min-height: 468px;
            position: relative;
            background-color: #30373d;
            border-radius: 0 0 20px 20px;

            .imglist {
                width: 100%;
                padding: 0 10px;
                margin: 10px 0 20px;
                cursor: pointer;

                &::-webkit-scrollbar {
                    width: 0;
                    height: 0;
                    display: none;
                }

                @include flex(row, flex-start, center);
                flex-wrap: nowrap;

                .imgitem+.imgitem {
                    margin-left: 30px;
                }

                .imgitem {
                    position: relative;
                    transition: all 0.4s;
                    transform: scale(1);
                    min-width: 77px;
                    height: 68px;
                    @include flex(row, center, center);

                    img {
                        width: 77px;
                        height: 68px;
                        opacity: 0.65;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

                    span {
                        font-size: 18px;
                        text-align: center;
                        color: #fff;
                        position: static;
                        z-index: 4;
                    }
                }

                .scale {
                    transform: scale(1.18);

                    img {
                        opacity: 1;
                    }
                }
            }

            .vipimg {
                @include flex(row, space-between, flex-start);
                border-bottom: 1px solid #4a4c53;
                padding-bottom: 10px;

                >div {
                    position: relative;
                    width: 300px;
                    @include flex(row, center, center);

                    img {
                        width: 200px;
                        height: 200px;
                    }

                    span {
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        display: block;
                        padding: 0 10px;

                        width: 70px;
                        font-size: 20px;
                        text-align: center;
                        height: 28px;
                        line-height: 28px;
                        color: #fff;
                        border: 1px solid #fff;
                        background-color: rgb(26, 63, 156);
                        border-radius: 15px;

                    }
                }

                ul {
                    @include flex(row, space-between, center);
                    width: 100%;
                    flex: 1;
                    flex-wrap: wrap;
                    margin-top: 10px;


                    li {
                        width: 50%;
                        margin-bottom: 30px;
                        @include flex(row, flex-start, center);

                        img {
                            width: 68px;
                            margin-right: 10px;
                        }

                        div {
                            @include flex(column, center, flex-start);

                            span {
                                font-size: 17px;
                                color: #fff;
                                white-space: nowrap;
                            }

                            strong {
                                font-size: 22px;
                                color: #b5bac8;
                                display: block;
                                margin-top: 8px;
                            }
                        }
                    }
                }
            }

            .module1 {
                margin-top: 20px;

                h2 {
                    font-size: 20px;
                    color: #fff;
                    margin-bottom: 8px;
                }

                p {
                    font-size: 18px;
                    color: #fff;
                }
            }


        }
    }

}
</style>